<template>
  <div id="app" @touchstart="touchstart">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />
  </div>
</template>

<script>
import { Dialog } from "vant";
export default {
  name: "App",
  data() {
    return {
      lTime: new Date().getTime(), // 最后一次点击的时间
      cTime: new Date().getTime(), // 当前时间
      // tOut: 60 * 10 * 1000,   //超时时间10min
      tOut: 60 * 10 * 1000,
      t1: "",
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.t1 = setInterval(this.tTime, 1000);
  },
  methods: {
    touchstart() {
      this.lTime = new Date().getTime(); // 当界面被点击更新点击时间
    },
    tTime() {
      this.cTime = new Date().getTime();
      if (this.cTime - this.lTime > this.tOut) {
        // 判断是否登录状态
        // 未登录状态
        if (sessionStorage.getItem("user") === null) {
          this.lTime = new Date().getTime();
        } else {
          // 登录状态
          Dialog.alert({
            message: "登录超时，请重新登录。",
          }).then(() => {
            this.lTime = new Date().getTime(); // 当界面被更新时间
            this.$store.commit("LOGOUT");
            this.$router.replace(
              { path: "/login" },
              (onComplete) => {},
              (onAbort) => {}
            );
          });
        }
      }
    },
  },
};
// ios禁止缩放
window.onload = function () {
  document.addEventListener("touchstart", function (event) {
    if (event.touches.length > 1) {
      event.preventDefault();
    }
  });
  document.addEventListener("gesturestart", function (event) {
    event.preventDefault();
  });
};
</script>
<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  font-size: 0.12rem;
}
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* H5页面适配问题 */
html {
  font-size: 625%; /*100 ÷ 16 × 100% = 625%*/
}
@media screen and (min-width: 360px) and (max-width: 374px) and (orientation: portrait) {
  html {
    font-size: 703%;
  }
}
@media screen and (min-width: 375px) and (max-width: 383px) and (orientation: portrait) {
  html {
    font-size: 732.4%;
  }
}
@media screen and (min-width: 384px) and (max-width: 399px) and (orientation: portrait) {
  html {
    font-size: 750%;
  }
}
@media screen and (min-width: 400px) and (max-width: 413px) and (orientation: portrait) {
  html {
    font-size: 781.25%;
  }
}
@media screen and (min-width: 414px) and (max-width: 431px) and (orientation: portrait) {
  html {
    font-size: 808.6%;
  }
}
@media screen and (min-width: 432px) and (max-width: 479px) and (orientation: portrait) {
  html {
    font-size: 843.75%;
  }
}
</style>
